<template>
  <div class="crumbs">
    <template v-for="(item, index) in crumbsList" :key="item.path">
      <a v-if="index + 1 !== crumbsList.length">{{ item?.meta?.title }}</a>
      <span v-else>{{ item?.meta?.title }}</span>
    </template>
  </div>
</template>
<script setup>
  import { computed } from "vue"
  import { useRouter } from "vue-router"
  const rotuer = useRouter()

  const crumbsList = computed(() => rotuer.currentRoute.value.matched)
</script>

<style lang="scss" scoped>
  .crumbs {
    margin-left: 19px;
    a {
      color: var(--n-black-light-3);
      &:after {
        content: "/";
        margin: 0 8px;
      }
    }
    span {
      color: var(--n-black-light-1);
    }
  }
</style>
